<template>
	<view class="order-nav">
		<view class="nav">
		<view class="nav-list" v-for="(item,index) in tabNavBars" :key="index"  @click="changeActiveNav(index)" :style="activeIndex===index?actColor:''">
			{{item.name}}
		</view>
	</view>
	</view>
</template>
<script>
	export default{
		props:{
			// 导航列表数据
			tabNavBars:{
				type:Array,
				default:[]
			},
			//激活的颜色样式
			navColor:{
				type:String,
				default:'#4CD964'
			},
			
			// 默认激活样式的下标
			activeIndex:{
				type:Number,
				default:0
			}	
		},
		computed:{
			// 添加的激活样式这是，思想啊……动态绑定样式的时候使用计算属性
			actColor(){
				return `color:${this.navColor};border-bottom: solid 5rpx ${this.navColor};box-sizing:border-box`
			}
		},
		methods:{
			// 改变激活样式
			changeActiveNav(index){
				// 其它业务逻辑
				this.$emit('changeAct',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav{
		display: flex;
		border-bottom: solid 1rpx #e1e1e1;
		color: #999999;
		.nav-list{
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0 20rpx  0;
			font-size: 33rpx;
			box-sizing: border-box;
		}
	}
</style>
